<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="js/Swiper-3.4.2/dist/css/swiper.min.css" />
		<style type="text/css">
			html,
			body {
				height: 300%;
			}
			
			* {
				margin: 0;
				padding: 0;
			}
			
			#wrap {
				width: 900px;
				margin: 0 auto;
			}
			
			#nav {
				width: 900px;
				height: 100px;
			}
			
			#nav img {
				width: 200px;
				height: 100px;
			}
			
			#nav_left {
				width: 200px;
				height: 100px;
				float: left;
			}
			
			#nav_left img {
				width: 200px;
				height: 100px;
				margin-top: 1px;
			}
			
			#nav_right {
				width: 700px;
				height: 100px;
				display: inline-block;
			}
			
			.nav_s {
				font-size: 12px;
				color: black;
			}
			
			#nav_right .nav_s {
				margin-left: 10px;
			}
			
			#nav_select {
				width: 215px;
				height: 22px;
				float: right;
				margin-right: 10px;
				outline: none;
			}
			
			.gang {
				float: right;
				margin-top: 2px;
				margin-right: 14px;
				font-size: 10px;
				color: black;
				font-weight: bolder;
			}
			
			.sublink a {
				margin-top: 2px;
				text-decoration: none;
				font-size: 13px;
				color: darkgreen;
				float: right;
				font-weight: bolder;
			}
			
			#nav_top {
				width: 700px;
				height: 30px;
				margin-top: 5px;
			}
			
			#nav_bottom {
				width: 700px;
				height: 50px;
				position: relative;
			}
			
			#nav_bottom img {
				width: 700px;
				height: 35px;
			}
			
			#nav_li {
				width: 700px;
				float: left;
				position: absolute;
				left: 0;
				top: 5px;
			}
			
			#nav_li li {
				width: 100px;
				height: 30px;
				list-style: none;
				float: left;
				font-size: 14px;
				color: white;
				margin-left: 36px;
				margin-top: 3px;
			}
			
			#nav_li li:hover {
				color: yellow;
			}
			
			#middle {
				width: 900px;
				height: 550px;
				margin-top: 10px;
				position: relative;
			}
			
			#middle_top {
				width: 900px;
				height: 400px;
			}
			
			#middle_left {
				width: 600px;
				height: 400px;
				float: left;
				position: relative;
			}
			
			.swiper-container {
				width: 600px;
				height: 400px;
				float: left;
				position: relative;
			}
			
			.swiper-button-prev {
				width: 50px;
				height: 50px;
				opacity: 0.4;
				background-color: black;
				position: absolute;
				left: 10px;
				top: 200px;
				border-radius: 5px;
			}
			
			.swiper-button-next {
				width: 50px;
				height: 50px;
				opacity: 0.4;
				background-color: black;
				position: absolute;
				left: 550px;
				top: 200px;
				border-radius: 5px;
			}
			
			#middle_left img {
				width: 600px;
				height: 400px;
				float: left;
			}
			
			#middle_right {
				width: 283px;
				height: 400px;
				float: right;
				background-image: url(img/pic1.jpg);
				background-size: 100% 100%;
				position: relative;
				overflow: hidden;
			}
			
			.middle_img2 {
				width: 283px;
				height: 400px;
				float: right;
			}
			
			.middle_img3 {
				width: 283px;
				height: 300px;
				float: right;
				position: ;
			}
			
			#middle_bottom {
				width: 900px;
				height: 100px;
				float: left;
				position: relative;
			}
			
			#middle_bottom li {
				list-style: none;
				float: left;
				margin-top: 40px;
			}
			
			.middle_l_1 {
				float: left;
				width: 195px;
				height: 100px;
				background-image: url(img/box_0.jpg);
				background-size: 100% 100%;
			}
			
			.middle_l_1:hover {
				background-image: url(img/box_0_0.jpg);
				background-size: 100% 100%;
			}
			
			.middle_l_2 {
				width: 195px;
				height: 100px;
				float: left;
				margin-left: 15px;
				background-image: url(img/box_1.jpg);
				background-size: 100% 100%;
			}
			
			.middle_l_2:hover {
				background-image: url(img/box_1_0.jpg);
				background-size: 100% 100%;
			}
			
			.middle_l_3 {
				width: 195px;
				height: 100px;
				float: left;
				margin-left: 15px;
				background-image: url(img/box_2.jpg);
				background-size: 100% 100%;
			}
			
			.middle_l_3:hover {
				background-image: url(img/box_2_0.jpg);
				background-size: 100% 100%;
			}
			
			.middle_r_1 {
				width: 125px;
				height: 100px;
				margin-left: 25px;
				background-image: url(img/box_4.jpg);
				background-size: 100% 100%;
			}
			
			.middle_r_1:hover {
				background-image: url(img/box_4_0.jpg);
				background-size: 100% 100%;
			}
			
			.middle_r_2 {
				width: 125px;
				height: 100px;
				margin-left: 10px;
				background-image: url(img/box_3.jpg);
				background-size: 100% 100%;
			}
			
			.middle_r_2:hover {
				background-image: url(img/box_3_0.jpg);
				background-size: 100% 100%;
			}
			
			#weiixin {
				width: 250px;
				height: 250px;
			}
			
			.Erweima {
				position: absolute;
				left: 680px;
				top: 200px;
				z-index: 222;
				display: none;
			}
			
			#drop_menu {
				position: absolute;
				left: 170px;
				top: 34px;
				display: none;
				z-index: 999999;
			}
			
			#drop_menu li {
				list-style: none;
				width: 200px;
				height: 35px;
				line-height: 35px;
				background: #0ca251;
				text-shadow: 1px 1px 1px #000;
				border: 1px solid lightgrey;
				border-top: 3px solid #349a48;
			}
			
			#drop_menu li a {
				text-decoration: none;
				color: white;
				font-size: 12px;
				margin-left: 5px;
				font-weight: bolder;
			}
			
			#drop_menu li a:hover {
				color: yellow;
			}
			
			#footer {
				width: 900px;
				height: 100px;
				position: relative;
			}
			
			#footer li {
				list-style: none;
				float: left;
				margin-left: 5px;
			}
			
			#footer li a {
				text-decoration: none;
				color: forestgreen;
				font-size: 12px;
				font-weight: bolder;
			}
			
			.footer_p1 {
				position: absolute;
				left: 300px;
			}
			
			.footer_p2 {
				position: absolute;
				left: 300px;
				top: 24px;
			}
			
			.footer_p3 {
				width: 400px;
				height: 40px;
				position: absolute;
				left: -30px;
				top: 35px;
			}
			
			.footer_p3 .footer_s1 {
				text-align: center;
				font-size: 15px;
				color: black;
			}
			
			.footer_p3 .footer_s2 {
				font-size: 10px;
				position: absolute;
				left: 140px;
				top: 24px;
			}
			
			#middle_right1 {
				width: 283px;
				height: 160px;
				float: right;
				position: relative;
				overflow: hidden;
			}
			
			.middle_img_g {
				width: 283px;
				height: 155px;
				position: absolute;
				left: 0;
				top: -155px;
				/*display:none;*/
				z-index: 0;
			}
			
			.middle_text1 {
				width: 283px;
				height: 40px;
				position: absolute;
				left: -283px;
				top: 40px;
				display: block;
				z-index: 1;
			}
			
			.middle_text2 {
				width: 283px;
				height: 45px;
				position: absolute;
				left: -283px;
				top: 106px;
				display: block;
				z-index: 300;
			}
			
			.middle_right2 {
				width: 283px;
				height: 160px;
				float: right;
				position: relative;
			}
			
			.middle_img_b {
				width: 283px;
				height: 155px;
				position: absolute;
				left: 0;
				top: -155px;
				display: none;
			}
			
			.middle_text3 {
				width: 283px;
				height: 40px;
				position: absolute;
				left: -283px;
				top: 40px;
				display: none;
				z-index: 200;
			}
			
			.middle_text4 {
				width: 283px;
				height: 45px;
				position: absolute;
				left: -283px;
				top: 106px;
				display: none;
				z-index: 200;
			}
			
			.middle_right3 {
				width: 283px;
				height: 160px;
				float: right;
				position: relative;
			}
			
			.middle_img_r {
				width: 283px;
				height: 155px;
				position: absolute;
				left: 0;
				top: -155px;
				display: none;
			}
			
			.middle_text5 {
				width: 283px;
				height: 40px;
				position: absolute;
				left: -283px;
				top: 40px;
				display: none;
				z-index: 200;
			}
			
			.middle_text6 {
				width: 283px;
				height: 45px;
				position: absolute;
				left: -283px;
				top: 106px;
				display: none;
				z-index: 200;
			}
		</style>
	</head>

	<body>
		<div id="wrap">
			<!--首页导航区域-->
			<div id="nav">
				<div id="nav_left">
					<img src="img/logo.png" />
				</div>
				<div id="nav_right">
					<div id="nav_top">
						<span class="nav_s">中国</span>
						<span class="sublink"><a href="">进入全球官网</a></span>
						<span class="gang">|</span>
						<select name="" id="nav_select">
							<option value="" id="selectL">Select Language</option>
							<option value="" id="enSelect">English</option>
							<option value="" id="chSelect">Chinese</option>
						</select>
					</div>
					<div id="nav_bottom">
						<img src="img/绿条.png" />
						<ul id="nav_li">
							<li>新闻动态</li>
							<li id="drop_li">
								美食与营养
							</li>
							<li>加盟流程</li>
							<li>关于我们</li>
							<li>快餐店位置查询</li>
						</ul>
						<!--全效果下拉菜单-->
						<ul id="drop_menu">
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=001" onclick="return checklink(&#39;001&#39;)">超值 Value</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=002" onclick="return checklink(&#39;002&#39;)">经典 Classics</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=003" onclick="return checklink(&#39;003&#39;)">精选 Premium</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=004" onclick="return checklink(&#39;004&#39;)">低脂 Low Fat</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=005" onclick="return checklink(&#39;005&#39;)">百味卷 Wrap</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=006" onclick="return checklink(&#39;006&#39;)">沙拉 Salad</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=007" onclick="return checklink(&#39;007&#39;)">聚餐服务 Catering</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=008" onclick="return checklink(&#39;008&#39;)">饮料和小食 Drinks &amp; Sides</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=009" onclick="return checklink(&#39;009&#39;)">早餐 BREAKFAST</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=010" onclick="return checklink(&#39;010&#39;)">营养 Nutrition</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=011" onclick="return checklink(&#39;011&#39;)">如何点餐 How To Order</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!--首页中部菜单区域-->
			<div id="middle">
				<div id="middle_top">
					<div id="middle_left">
						<div class="swiper-container">
							<div class="swiper-wrapper">
								<div class="swiper-slide" style="background-image: url(img/201612191444322d3b38.jpg);"></div>
								<div class="swiper-slide" style="background-image: url(img/2016040117224114977a.png);background-size: 100% 100%;"></div>
							</div>
							<div class="swiper-button-prev"></div>
							<div class="swiper-button-next"></div>
						</div>
					</div>
					<div id="middle_right">
						<div id="middle_right1">
							<img src="img/t1.png" class="middle_text1" />
							<img src="img/tbg1.png" class="middle_img_g" />
							<img src="img/w1.png" class="middle_text2" />
						</div>
						<div id="middle_right2">
							<!--	<img src="img/pic2.jpg" class="middle_img3" />-->
							<img src="img/t2.png" class="middle_text3" />
							<img src="img/tbg2.png" class="middle_img_b" />
							<img src="img/w2.png" class="middle_text4" />
						</div>
						<div id="middle_right3">
							<img src="img/t3.png" class="middle_text5" />
							<img src="img/tbg3.png" class="middle_img_r" />
							<img src="img/w3.png" class="middle_text6" />
						</div>
					</div>
				</div>
				<ul id="middle_bottom">
					<li class="middle_l_1">
						<a href="http://www.subway.com.cn/position.aspx"></a>
					</li>
					<li class="middle_l_2">
						<a href="http://www.subway.com.cn/menu.aspx?d=011"></a>
					</li>
					<li class="middle_l_3">
						<a href="http://www.subway.com.cn/news.aspx?t=1"></a>
					</li>
					<li class="middle_r_1">
						<a href="http://weibo.com/login.php"></a>
					</li>
					<li class="middle_r_2"></li>
				</ul>
				<div id="weixin">
					<img src="img/code.png" class="Erweima" />
				</div>
			</div>
			<!--首页底部区域-->
			<ul id="footer">
				<div class="footer_p1">
					<li>
						<a href="">主页</a>
					</li>
					<li>
						<a href="">|</a>
					</li>
					<li>
						<a href="">菜单/营养</a>
					</li>
					<li>
						<a href="">|</a>
					</li>
					<li>
						<a href="">如何加盟</a>
					</li>
					<li>
						<a href="">|</a>
					</li>
					<li>
						<a href="">关于我们</a>
					</li>
					<li>
						<a href="">|</a>
					</li>
					<li>
						<a href="">快餐店位置查询</a>
					</li>
				</div>
				<div class="footer_p2">
					<li>
						<a href="">联系我们</a>
					</li>
					<li>
						<a href="">|</a>
					</li>
					<li>
						<a href="">使用权限</a>
					</li>
					<li>
						<a href="">|</a>
					</li>
					<li>
						<a href="">隐私权政策</a>
					</li>
					<li>
						<a href="">|</a>
					</li>
					<li>
						<a href="">SUBWAY Partners™</a>
					</li>
					<div>
						<div class="footer_p3">
							<span class="footer_s1">SUBWAY® is a Registered Trademark of Subway IP Inc.</span>
							<span class="footer_s2">®2016 Subway IP Inc.</span>
						</div>
			</ul>
			</div>
	</body>
	<script src="js/Swiper-3.4.2/swiper-3.4.2.min.js"></script>
	<script src="js/jquery-2.2.3.min.js"></script>
	<script src="js/language.js"></script>
	<script>
		//中部轮播图两侧按钮
		$("#middle_left").on("mouseover", function() {
			$(".swiper-button-prev").css({ opacity: 0.3 });
			$(".swiper-button-next").css({ opacity: 0.3 });
		});
		$("#middle_left").on("mouseout", function() {
			$(".swiper-button-prev").css({ opacity: 0 });
			$(".swiper-button-next").css({ opacity: 0 });
		});
		//中部轮播图切换效果
		var mySwiper = new Swiper('.swiper-container', {
			prevButton: '.swiper-button-prev',
			nextButton: '.swiper-button-next',
			autoplay: 2000,
			loop: true,
			effect: 'fade',
			fade: {
				crossFade: false,
			}
		})
		//下拉菜单
		$("#drop_li").on("mouseover", function() {
			$("#drop_menu").css({ display: "block" });
		});
		$("#drop_li").on("mouseout", function() {
			$("#drop_menu").css({ display: "none" });
		});
		$("#drop_menu").on("mouseover", function() {
			$("#drop_menu").css({ display: "block" });
		});
		$("#drop_menu").on("mouseout", function() {
			$("#drop_menu").css({ display: "none" });
		});

		//二维码
		$(".middle_r_2").on("mouseover", function() {
			$(".Erweima").css({ display: "block" });
		})
		$(".middle_r_2").on("mouseout", function() {
			$(".Erweima").css({ display: "none" });
		})
		//国际化
		//选择语言
		$("#enSelect").on("click", function() {
			setThing(languageTopMenuData);
		})
		//英语

		//中右部动画
		//绿	
		var  BckGroundArr = ["url(img/pic1.jpg)","url(img/pic2.jpg)","url(img/pic3.jpg)"];//存放背景图的数组
		var  BlockArr = ["url(img/tbg1.jpg)","url(img/tbg2.jpg)","url(img/tbg3.jpg)"];//存放上部下来的方块
		var  WordArr = ["url(img/t1.png)","url(img/t2.png)","url(img/t3.png)"];//存放字1
		var  WordBrr = ["url(img/w1.png)","url(img/w2.png)","url(img/w3.png)"];//存放数字2
//		function Move(){
			    $(".middle_img_g").eq(0).animate({top:"0"},600,function(){
			    	$(".middle_text1").eq(0).animate({left:"0"},600,function(){
			    $(".middle_text2").eq(0).animate({left:"0"},1200,function(){
			    	$(".middle_text1").eq(0).animate({left:"320"},600,function(){
			    $(".middle_text2").eq(0).animate({left:"320"},1200,function(){
			    	$(".middle_img_g").eq(0).animate({top:"-155"},600,function(){
			    	$(".middle_text1").eq(0).css({left:"-320px"});
			    	$(".middle_text2").eq(0).css({left:"-320px"});
			    	  	Move();	
			    	 
//			     	var ind;
//			     $("BackGroundArr").each(i){
//			     	
//			     	
//			     }
//			      $("BlockArr").each(i){
//			     	 
//			     }
//			       $("WordArr").each(i){
//			     	 
//			     }
//			       $("WordBrr").each(i){
//			     	 
//			     }
			     
			    	  	
			    	});
		    	
			   
			    
			    });
			    });
			    	});
			    });
			    	});
//			    });
//			    });
//	 	}
//		Move();
	</script>

</html>